<script setup>
import { qrGroupListData } from '@/data'
import EditImg from '../welcome/editImg.vue'
// import { useRoute } from 'vue-router'
// import { weekList, isEmpty,deepClone } from '@/utils'
import { toRaw } from '@vue/reactivity'
import { ref, defineExpose } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { friendWelcomeInfo } from '@/api'
// import { CircleClose, Search, CirclePlus } from '@element-plus/icons-vue'
// import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import Draggable from 'vuedraggable'
import EditMiniprogram from './EditApplet.vue'
import EditLink from './editLink.vue'
// 编辑基础信息页
const editImg = ref()
const editMiniprogram = ref()
const editLink = ref()
const value1 = ref([])
const value2 = ref([])
const value3 = ref([])

const isRefresh = ref(true)
// const props = defineProps({
// 	editForm: {
// 		type: Number,
// 		default: {}
// 	}
// })

console.log('44444', toRaw(props.editForm))
const dragOptions = ref({
	animation: 120,
	scroll: true,
	group: 'sortlist',
	ghostClass: 'ghost-style'
})
const form = ref({})
// form._value = toRaw(props.editForm)
// const welcomeOtherData = ref(toRaw(props.editForm).welcomeOtherData)
// console.log('id', welcomeOtherData.value)
const formRef = ref()
const rules = ref({
	name: [
		{ required: true, message: '请输入分组名称', trigger: 'blur' },
		{ min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' }
	]
})
const consterData = (val) => {
	friendWelcomeInfo({
		id: ''
	}).then((res) => {})
}

const welcomeIndex = ref(0)

const dialogVisible = ref(false)
const openingDialogName = ref('')
const groupList = ref([])
const drag = ref()

const week = ref([])
const time = ref([])

const options = [
	{
		value: 'Option1',
		label: '周一'
	},
	{
		value: 'Option2',
		label: '周二'
	},
	{
		value: 'Option3',
		label: '周三'
	},
	{
		value: 'Option4',
		label: '周四'
	},
	{
		value: 'Option5',
		label: '周五'
	},
	{
		value: 'Option6',
		label: '周六'
	},
	{
		value: 'Option7',
		label: '周日'
	}
]

const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}

const submit = (val) => {
	console.log('22222', val)
	// if (!formRef.value) return
	// formRef.value.validate((valid) => {
	// 	if (valid) {
	// 		console.log(form.value)
	// 		var json = form.value
	// 		json.week = week.value.join(',')
	// 		json.time = time.value.join('~')
	// 		console.log(json, '保存二维码编辑接口')
	// 		return form.value
	// 	} else {
	// 		console.log('error submit!')
	// 		return false
	// 	}
	// })
}
submit()
const cancel = () => {
	dialogVisible.value = false
	emits('goBack')
}

const showDialog = (type, val) => {
	openingDialogName.value = type
	// if (val != undefined) {
	// 	welcomeIndex.value = val
	// 	var obj = toRaw(welcomeOtherData._value)[val]
	// 	var dataObj = {}
	// 	dataObj = deepClone(obj)
	// }
	switch ((type, val)) {
		case '1':
			console.log('传入图片', val)
			editImg.value.show(val)
			break
		case '2':
			editLink.value.show(val)
			break
		case '3':
			editMiniprogram.value.show(val)
			break
	}
}
const getDialogueDataFa = (val) => {
	console.log(val)
	var json = toRaw(welcomeOtherData.value)
	json[welcomeIndex.value] = val
	welcomeOtherData._value = json
	console.log(json, welcomeOtherData.value)
	handleRefresh()
}

const dele = (index) => {
	console.log(index)
	// var arr = toRaw(staff_data.value)
	// arr.splice(index, 1)
	// staff_data._value = arr

	handleRefresh()
}

const addListItem = (name) => {
	switch (name) {
		case 'staff_data':
			var arr = toRaw(staff_data.value)
			arr.push({
				selectStaffData: [],
				selectstaffids: [],
				time: [],
				week: []
			})

			staff_data._value = arr
			break
	}
	handleRefresh()
}
let selectStaffupData = []
const handleSelectionChange = (val) => {
	selectStaffupData = val
}
const addClientName = () => {
	var json = form.value
	json.welcomeContent += '客户昵称'
	form._value = json
	handleRefresh()
}
const showvalue = (val) => {
	console.log(val)
}
const emits = defineEmits(['goBack'])

defineExpose({
	showvalue
})
</script>
<template>
	<div>
		<div class="app-edit app-gap-block-top">
			<div style="display: flex">
				<div>
					<div class="app-edit-title">
						<span class="app-edit-title-words">基础信息</span>
					</div>
					<el-tag
						style="width: 712px; margin-left: 56px; height: 50px; line-height: 20px"
						class="app-el-tag app-gap-margin-top"
						type="warning"
					>
						<MyIcon class="app-icon app-warning-font" name="Bell" />
						1、在渠道码处设置的欢迎语会被优先推送，如果成员在渠道码处设置了欢迎语，在此设置的欢迎语不会生效<br />

						<span style="margin-left: 16px"> 2、一个成员如果被设置了多个欢迎语，将会使用最新设置或修改的欢迎语</span>
					</el-tag>

					<div>
						<el-form ref="formRef" :model="form" :rules="rules">
							<el-form-item label="选择分组:" prop="name" style="margin-left: 75px; margin-top: 30px">
								<div>
									<el-select
										v-if="isRefresh"
										v-model="form.groupid"
										class="m-2"
										@change="handleRefresh"
										placeholder="Select"
										size="large"
									>
									</el-select>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<!-- <div style="margin-left:40px ;"><img src="../../../../../assets/phone.png" /></div> -->
			</div>

			<!-- 欢迎语 -->
			<div class="app-edit-title" style="border-bottom: none;">
				<span class="app-edit-title-words">发送欢迎语</span>
			</div>
			<div class="app-edit-body">
				<div class="app-flex-left-top">
					<div>
						<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
							<el-form-item label="发送欢迎语:">
								<div v-if="isRefresh">
									<div>
										<div class="mes-name">消息内容:</div>
										<div class="app-warning-font app-pointer">
											<span @click="addClientName">[插入客户昵称]</span>
										</div>
										<div>
											<el-input
												:rows="15"
												@input="handleRefresh"
												class="app-max-width mes-field"
												v-model="form.welcomeContent"
												maxlength="600"
												placeholder="请输入"
												show-word-limit
												type="textarea"
											/>
										</div>
										<el-popover
											popper-style="padding: 0px;min-width:0px"
											placement="right"
											:width="100"
											trigger="click"
										>
											<div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1')">
													<MyIcon class="app-icon" name="Pic" />
													<span class="app-gap-words-left-s"> 图片 </span>
												</div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2')">
													<MyIcon class="app-icon" name="LinkChain" />
													<span class="app-gap-words-left-s"> 链接 </span>
												</div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('3')">
													<MyIcon class="app-icon" name="MiniProgram" />
													<span class="app-gap-words-left-s"> 小程序 </span>
												</div>
											</div>
											<template #reference>
												<span class="app-5-words app-pointer app-flex-left">
													<el-icon :size="17" class="app-pointer primary-font">
														<CirclePlus />
													</el-icon>
													<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
												</span>
											</template>
										</el-popover>
										<Draggable
											v-model="drag"
											:list="welcomeOtherData"
											:animation="100"
											item-key="id"
											class="list-group"
											:forceFallback="true"
											ghost-class="ghost"
										>
											<template #item="{ element, index }">
												<div class="app-flex-2">
													<div class="app-flex-left">
														<span class="app-close-circle"> - </span>
														<span>
															【<span v-if="element['type'] == '1'">图片</span>
															<span v-else-if="element['type'] == '2'">链接</span>
															<span v-else-if="element['type'] == '3'">小程序</span>】:
														</span>
														<span class="app-gap-words-left-s">{{ element['title'] }}</span>
													</div>
													<MyIcon
														@click="showDialog(element['type'], index)"
														class="app-pointer app-icon"
														name="Edit"
													/>
												</div>
											</template>
										</Draggable>
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
					<div v-if="form.welcome_type == 1" class="app-input-phone">
						<div class="app-phone-scroll">
							<div class="app-flex-left-top">
								<div class="app-avatar">
									<MyIcon class="app-white-font" name="Person" />
								</div>
								<div v-if="!isEmpty(form.welcomeContent)">
									<div class="app-phone-words">
										{{ form.welcomeContent }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 分时段欢迎语部分 -->
				<div class="">
					<div>
						<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
							<el-form-item label="分时段欢迎语：">
								<div v-if="isRefresh">
									<div>
										<el-switch
											:active-value="1"
											:inactive-value="0"
											@change="handleRefresh"
											size="small"
											v-model="form.dayparting_status"
										/>
										<span class="app-switch-right-text">已{{ form.dayparting_status === 1 ? '开启' : '关闭' }}</span>
									</div>
									<div v-if="form.dayparting_status == 1">
										<el-tag class="app-el-tag" style="width: 500px; height: 50px; line-height: 20px">
											分时段欢迎语 ：1、员工上下班不同时间段可设置不同欢迎语；
											<div style="margin-left: 88px; margin-top: 10px">2、分时段之外的时间将发送渠道欢迎语。</div>
										</el-tag>
										<div class="app-flex-left-top">
											<div class="welcomeStyle">
												<div class="mesname">
													<div>
														发送日期:
														<el-select v-model="value1" multiple placeholder="请选择" style="width: 180px">
															<el-option
																v-for="item in options"
																:key="item.value"
																:label="item.label"
																:value="item.value"
															/>
														</el-select>
													</div>

													<div style="display: flex; margin-left: 30px">
														<el-time-picker v-model="value2" placeholder="开始时间" style="width: 100px" /><span
															style="margin-left: 20px"
															>~</span
														>
														<el-time-picker
															v-model="value3"
															arrow-control
															placeholder="结束时间"
															style="width: 100px; margin-left: 20px"
														/>
													</div>
												</div>
												<div class="app-warning-font app-pointer">
													<span @click="addClientName">[插入客户昵称]</span>
												</div>
												<div>
													<el-input
														:rows="20"
														@input="handleRefresh"
														class="app-max-width mes-field"
														v-model="form.welcomeContent"
														maxlength="600"
														placeholder="请输入"
														show-word-limit
														type="textarea"
													/>
												</div>
												<el-popover
													popper-style="padding: 0px;min-width:0px"
													placement="right"
													:width="100"
													trigger="click"
												>
													<div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1')">
															<MyIcon class="app-icon" name="Pic" />
															<span class="app-gap-words-left-s"> 图片 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2')">
															<MyIcon class="app-icon" name="LinkChain" />
															<span class="app-gap-words-left-s"> 链接 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('3')">
															<MyIcon class="app-icon" name="MiniProgram" />
															<span class="app-gap-words-left-s"> 小程序 </span>
														</div>
													</div>
													<template #reference>
														<span class="app-5-words app-pointer app-flex-left">
															<el-icon :size="17" class="app-pointer primary-font">
																<CirclePlus />
															</el-icon>
															<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
														</span>
													</template>
												</el-popover>
												<Draggable
													v-model="drag"
													:list="welcomeOtherData"
													:animation="100"
													item-key="id"
													class="list-group"
													:forceFallback="true"
													ghost-class="ghost"
												>
													<template #item="{ element, index }">
														<div class="app-flex-2">
															<div class="app-flex-left">
																<span class="app-close-circle"> - </span>
																<span>
																	【<span v-if="element['type'] == '1'">图片</span>
																	<span v-else-if="element['type'] == '2'">链接</span>
																	<span v-else-if="element['type'] == '3'">小程序</span>】:
																</span>
																<span class="app-gap-words-left-s">{{ element['title'] }}</span>
															</div>
															<MyIcon
																@click="showDialog(element['type'], index)"
																class="app-pointer app-icon"
																name="Edit"
															/>
														</div>
													</template>
												</Draggable>
											</div>

											<div class="app-input-phone">
												<div class="app-phone-scroll">
													<div class="app-flex-left-top">
														<div class="app-avatar">
															<MyIcon class="app-white-font" name="Person" />
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div>
										<span class="app-5-words app-pointer app-flex-left">
											<el-icon :size="17" class="app-pointer primary-font">
												<CirclePlus />
											</el-icon>
											<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加分段欢迎语 </span>
										</span>
									</div>
									<div class="bottomStyle">
										注意: 1、新建欢迎语最多可发送1条文字消息和9个附件<br />

										2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息<br />

										3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功<br />
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<EditImg @getDialogueData="getDialogueDataFa($event, val)" ref="editImg" />
		<EditLink @getDialogueData="getDialogueDataFa($event, val)" ref="editLink" />
		<EditMiniprogram @getDialogueData="getDialogueDataFa($event, val)" ref="editMiniprogram" />
	</div>
</template>

<style lang="scss">
@import url('../../../../../style/app-component.scss');
@import '../../../../../style/mixin.scss';
.app-phone-scroll {
	margin: 104px 20px 154px 26px;
	@include scrollBar;
	overflow: auto;
	height: calc(100% - 208px);
}
.mesname {
	display: flex;
	justify-content: flex-start;
	margin-top: 20px;
}
.welcomeStyle {
	padding: 20px;
	background-color: #fbfbfb;
	border: 1px solid #f3f3f3;
	margin-top: 20px;
}
.bottomStyle {
	background-color: #f7fcff;
	border: 1px solid #acd7ff;
	margin-top: 20px;
	padding: 20px;
}
</style>
